<template>
  <div class="buy-ticket" v-if="cinemaSchedule.cinema.name">
    <div class="buy-ticket-top">
      <van-nav-bar
        :title="cinemaSchedule.cinema.name"
        left-arrow
        @click-left="onClickLeft"
      />
      <van-notice-bar left-icon="volume-o" :text="cinemaSchedule.noticeMsg" />
    </div>
    <div class="buy-ticket-choose">
      <div class="buy-ticket-choose-wrap">
        <span
          v-for="item in seatingChart"
          :key="item.offerSeatId"
          @click="chooseSeat(item)"
          :class="
            item.isOccupied === true
              ? 'bought-seat'
              : item.sectionName
              ? 'selected-seat'
              : 'unselected-seat'
          "
        >
        </span>
      </div>
    </div>
    <div class="buy-ticket-bottom">
      <div class="buy-ticket-bottom-icon hCenter">
        <img src="../../assets/images/bought.png" alt="" /><span>已售</span>
        <img src="../../assets/images/selected.png" alt="" /><span>已选</span>
        <img src="../../assets/images/unselected.png" alt="" /><span>未选</span>
      </div>
      <div class="buy-ticket-bottom-select">
        <div class="buy-ticket-bottom-select-info fz14 bb">
          <div>{{ cinemaSchedule.film.name }}</div>
          <div>{{ moment.unix(time).format("M月D日hh时mm分") }}</div>
        </div>
        <div class="buy-ticket-bottom-select-time">
          <van-tabs v-model="active" @click="selectTime">
            <van-tab
              :title="moment.unix(item.showAt).format('M月D日hh时mm分')"
              swipeable
              class="tab"
              v-for="item in schedules"
              :key="item.showAt"
            ></van-tab>
          </van-tabs>
        </div>
      </div>
      <div class="buy-ticket-bottom-select-seat" v-if="seatList">
        <span
          swipeable
          class="seat"
          v-for="item in seatList"
          @click="removeSeat(item)"
          >{{ item.row }}排{{ item.column }}座</span
        >
      </div>
      <div class="buy-ticket-bottom-submit">
        <van-button type="primary" size="large" color="#ff5f16" @click="submit"
          >提交订单</van-button
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      // 电影选择的时间
      time: "",
      // 存放选择的座位
      seatList: [],
      // flag:true,
      // 影院的scheduleId对应的数据
      cinemaSchedule: "",
      // 座位的信息
      seatingChart: "",
      // 电影的场次
      schedules: "",
    };
  },
  computed: {},

  created() {
    let that = this;
    this.axios
      .get(process.env.VUE_APP_BASE_URL, {
        headers: {
          "X-Host": "mall.film-ticket.schedule.info",
          "X-Token": that.token,
        },
        params: {
          scheduleId: that.$route.query.scheduleId,
          k: 9712271,
        },
      })
      .then((res) => {
        console.log(res);
        // 获取影院的电影订票信息
        that.cinemaSchedule = res.data.data.schedule;
        that.time = res.data.data.schedule.showAt;
      })
      .catch((error) => {
        console.log(error);
      });
    // 获取座位
    this.axios
      .get(process.env.VUE_APP_BASE_URL, {
        headers: {
          "X-Host": "mall.film-ticket.seat.list",
          "X-Token": that.token,
        },
        params: {
          scheduleId: that.$route.query.scheduleId,
          k: 9712271,
        },
      })
      .then((res) => {
        console.log(res);
        // 获取座位
        that.seatingChart = res.data.data.seatingChart.seats;
        console.log(that.seatingChart);
      })
      .catch((error) => {
        console.log(error);
      });
    // 获取电影的场次
    this.axios
      .get(process.env.VUE_APP_BASE_URL, {
        headers: {
          "X-Host": "mall.film-ticket.schedule.list",
          "X-Token": that.token,
        },
        params: {
          filmId: that.$route.query.filmId,
          cinemaId: that.$route.query.cinemaId,
          date: that.$route.params.id,
          k: 9712271,
        },
      })
      .then((res) => {
        console.log(res);
        // 获取影院的电影作为信息
        that.schedules = res.data.data.schedules;
      })
      .catch((error) => {
        console.log(error);
      });
  },

  methods: {
    onClickLeft() {
      this.$router.back();
    },

    submit() {
      this.$router.push({
        name: "filmOrder",
      });
    },

    selectTime() {
      console.log(this.active);
      this.time = this.schedules[this.active].showAt;
    },
    removeSeat(obj) {
      // 删除已选择的座位
      let seatindex = "";
       let row = obj.row;
        let column = obj.column;
      this.seatList.forEach((item, index) => {
        if (item.row == row && item.column == column) {
          seatindex = index;
        }
      });
      this.seatList.splice(seatindex, 1);

      // 座位取反功能
      this.seatingChart.forEach((item, index) => {
        if (item.rowNum == row && item.columnNum == column) {
          item.sectionName = !item.sectionName;
        }
      });
    },
    chooseSeat(item) {
      // 先取反
      item.sectionName = !item.sectionName;
      // 获取行列
      let row = item.rowNum;
      let column = item.columnNum;
      let obj = { row, column };
      console.log(item.sectionName);
      // 判断时true时添加，false进行删除
      if (item.sectionName) {
        console.log("添加座位");
        this.seatList.push(obj);
      } else {
        let seatindex = "";
        this.seatList.forEach((item, index) => {
          let row = obj.row;
          let column = obj.column;
          if (item.row == row && item.column == column) {
            seatindex = index;
          }
        });
        this.seatList.splice(seatindex, 1);
      }
      console.log(this.seatList);
    },
  },
};
</script>


<style lang="scss" scoped>
img {
  width: 21px;
  height: 20px;
}
.buy-ticket {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  &-top {
    height: 44px;
    flex-shrink: 0;
    margin-bottom: 40px;
  }
  &-choose {
    height: 100%;
    flex-grow: 1;
    overflow: auto;
    margin-top: 10px;
    border: 1px solid #3c3c3c;
    width: 100%;

    &-wrap {
    }
  }
  &-bottom {
    // height: 200px;
    flex-shrink: 0;
    &-icon {
    }
    &-select {
      // width: 100%;
      margin: 5px 0;
    }
  }
}
.seat {
  display: inline-block;
  padding: 3px;
  border: 1px solid red;
}
.selected-seat {
  display: inline-block;
  background: url("../../assets/images/selected.png") center center no-repeat;
  background-size: 100% 100%;
  width: 25px;
  height: 25px;
}
.unselected-seat {
  display: inline-block;

  background: url("../../assets/images/unselected.png") center center no-repeat;
  background-size: 100% 100%;
  width: 25px;
  height: 25px;
}
.bought-seat {
  display: inline-block;

  background: url("../../assets/images/bought.png") center center no-repeat;
  background-size: 100% 100%;
  width: 25px;
  height: 25px;
}
</style>